<template>
  <div class="content-box">
    <div class="content" style="border-radius: 6px">
      <el-tabs v-model="tavIndex" :tab-position="tabPosition" @tab-click="tabIndexChange">
        <el-tab-pane :label="tabItem" v-for="(tabItem,index) in labelList" :key="index">
          <div ref="searchBox" class="search-box flex" v-show="showSearch">
            <el-form
              :model="queryParams"
              ref="queryForm"
              :inline="true"
              label-width="100px"
            >
              <el-form-item
                label="下游公司"
                style="margin-right: 20px"
                prop="companyIds"
                v-if="['下游公司对账单','下游产品对账单'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.companyIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in downCompanyOptionList"
                    :key="index"
                    :label="item.companyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上游公司"
                style="margin-right: 20px"
                prop="companyIds"
                v-if="['上游公司对账单','上游渠道对账单'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.companyIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in upCompanyOptionList"
                    :key="index"
                    :label="item.companyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="下游产品"
                style="margin-right: 20px"
                prop="productIds"
                v-if="['下游产品对账单'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.productIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in downProductOptionList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上游渠道"
                style="margin-right: 20px"
                prop="productIds"
                v-if="['上游渠道对账单'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.productIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in upAllChannelOptionList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="采量来源"
                style="margin-right: 20px"
                prop="pickType"
                v-if="['下游产品对账单','上游渠道对账单'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.pickType"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in pickTypeOptionList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="管理人" prop="manageUserIds">
                <el-select
                  v-model="queryParams.manageUserIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择管理人"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in manageOptionList"
                    :key="index"
                    :label="item.userName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="查询时间" prop="dateRange">
                <el-date-picker
                  :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
                  clearable
                  v-model="dateRange"
                  type="datetimerange"
                  range-separator="至"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  plain
                  >查询</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
                <el-button
                  type="success"
                  size="mini"
                  >导出</el-button
                >
                <el-button
                  size="mini"
                  :style="{
                     color:'#fff',
                     background:'#f57f17',
                     borderColor:'#f57f17'
                  }"
                  @click="handelDialog('数据修正')"
                  v-hasPermi="['dataCenter:accountReport:dataUpd']"
                  v-if="['下游产品对账单','上游渠道对账单'].includes(tabItem)"
                  >数据修正</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="table-box" style="padding-top: 0;"> 
            <el-row :gutter="10" class="mb8">
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="handleQuery"
                :columns="columns"
              ></right-toolbar>
            </el-row>
            <el-table
              v-sticky-header="{offsetTop: '-5px'}"
              ref="table"
              v-loading="loading"
              :data="dataList"
              :span-method="['下游产品对账单','上游渠道对账单'].includes(tabItem)?objectSpanMethod:null"
              border
              :row-class-name="tableRowClassName"
            >
              <template v-for="(item,index) in columns">
                <el-table-column
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="getColumnWidth(index)"
                  align="center"
                  :fixed="item.fixed"
                  :sortable="item.sortable ? item.sortable : false"
                  :show-overflow-tooltip="item.showTooltip"
                  v-if="item.visible"
                >
                  <template slot-scope="scope">
                    <!-- 调整消耗文本颜色处理 -->
                    <div v-if="item.prop === 'child_amendMoney'">
                       <span :style="{color: getTextColor(scope.row['child_amendMoneyType'])}">
                         {{  scope.row[item.prop] }}
                       </span>
                    </div>
                    <!-- 调整单量文本颜色处理 -->
                    <div v-else-if="item.prop === 'child_amendNum'">
                       <span :style="{color: getTextColor(scope.row['child_amendNumType'])}">
                         {{  scope.row[item.prop] }}
                       </span>
                    </div>
                    <!-- 操作单独处理 -->
                    <div v-else-if="item.prop === 'operation'">
                         <div class="flex-center">
                            <div 
                             v-if="!scope.row.child_isAmend"
                             @click="showConfirmPopo(scope.row)">
                              <el-popover
                               placement="left"
                               title="账单数据操作"
                               :value ="confirmActiveIndex === scope.row.child_productId"
                               trigger="click"
                               >
                               <el-form :model="confirmParams" :rules="confirmRules" :ref="`confirm_${scope.row.child_productId}`">
                                <el-form-item style="margin-bottom: 0;">
                                   <el-radio-group v-removeAriaHidden v-model="confirmParams.dataOpt" >
                                     <el-radio 
                                      v-for="(item,index) in dataOptTypeList" 
                                     :key="index" :label="item.value">{{ item.label }}
                                   </el-radio>
                                  </el-radio-group>
                                 </el-form-item>
                                 <el-form-item style="display: flex;justify-content: center;">
                                   <el-button type="primary" @click="clickSubmitConfirm(scope.row,`confirm_${scope.row.child_productId}`)">确定</el-button>
                                   <el-button @click="clickCancelConfirm(scope.row)">取消</el-button>
                                 </el-form-item>
                               </el-form>
                               <el-button
                                 slot="reference"
                                 type="text"
                                 v-hasPermi="['dataCenter:accountReport:dataOpt']"
                                 style="color: #fa8c16;"
                                 >数据操作</el-button
                               >
                              </el-popover> 
                            </div>
                            <span v-else>
                              <el-tag>账单无误</el-tag>
                            </span>
                         </div>
                    </div>
                    <span v-else>
                     {{  scope.row[item.prop] }}
                    </span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            <!-- 使用分页插件 -->
            <pagination
              v-show="total > 0"
              :total="total"
              :page-sizes="[10, 50, 100, 200, 500]"
              :page.sync="queryParams.pageIndex"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 数据修正 对话框 -->
    <el-dialog
        title="数据修正"
        width="650px"
        :visible.sync="dialogShow"
        :before-close="handleClose"
        v-loading="apiLoading"
      >
      <el-form :model="form" :rules="rules" label-width="80px" ref="formRef" >
        <el-form-item
           label="修正产品"
           prop="productId"
          v-if="['1'].includes(tavIndex)"
        >
          <el-select
            v-model="form.productId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 100%"
            :disabled="!!echoData.child_productId"
          >
            <el-option
              v-for="(item, index) in downProductOptionList"
              :key="index"
              :label="item.productName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="修正渠道"
          prop="productId"
          v-if="['3'].includes(tavIndex)"
        >
          <el-select
            v-model="form.productId"
            clearable
            filterable
            placeholder="请选择"
            style="width: 100%"
            :disabled="!!echoData.child_productId"
          >
            <el-option
              v-for="(item, index) in upChannelOptionList"
              :key="index"
              :label="item.productName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修正类型" prop="changeType">
           <el-select
             v-model="form.changeType"
             clearable
             filterable
             placeholder="请选择"
             style="width: 100%"
           >
             <el-option
               v-for="(item, index) in changeTypeOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="修正日期" prop="billTime">
          <el-date-picker
           v-model="form.billTime"
           type="date"
           style="width: 100%"
           value-format="yyyy-MM-dd"
           placeholder="选择日期"
           :disabled="!!echoData.child_billTime"
           >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修正金额" prop="money">
          <el-input-number 
              v-model="form.money" 
              controls-position="right" 
              placeholder="请输入"
              :min="0" 
              :precision="2"
              style="width: 100%;"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="修正单量" prop="orderNum">
          <el-input-number 
              v-model="form.orderNum" 
              controls-position="right" 
              placeholder="请输入"
              :min="0" 
              style="width: 100%;"
          >
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="handleSubmit('formRef')"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { querySysUserManageList } from "@/api/system/userManage";
import { getUpCompanyList } from "@/api/business/upCompanyManagement";
import { getDwnCompanyList } from "@/api/business/downCompanyManagement";
import { downQueryAllProductList } from "@/api/business/productManagement";
import { getUpChannelList,queryAllProductList} from "@/api/business/channelManagement";
import { 
  queryDownCompanyBillByPage,
  queryDownProductBillByPage,
  queryUpCompanyBillByPage,
  queryUpProductBillByPage,
  updateDownProductBillAmend,
  updateUpProductBillAmend,
  updateDownProductBillConfirm,
  updateUpProductBillConfirm
} from "@/api/dataCenter/accountReport";
import { mapGetters } from "vuex";
import moment from "moment";
import tableStickyMixins from "@/mixins/tableStickyMixins";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "AccountReport",
  data() {
    return {
      // 列表数据
      dataList: [],
      // 管理人筛选项
      manageOptionList: [],
      // 下游公司筛选项
      downCompanyOptionList: [],
      // 上游公司筛选项
      upCompanyOptionList: [],
      // 下游产品筛选项
      downProductOptionList: [],
      // 上游渠道筛选项(不包含采量)
      upChannelOptionList: [],
      // 上游渠道筛选项(包含采量)
      upAllChannelOptionList: [],
      // 采量来源
      pickTypeOptionList:[
        { value: 0, label: 'API' },
        { value: 1, label: '贷超' },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [
        { label: `统计日期`,prop: "billTime",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `下游公司名称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `充值金额`,prop: "inMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `核销金额`,prop: "obviateMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `对冲金额`,prop: "offsetMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `退款金额`,prop: "refundMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `账户余额`,prop: "surplusMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `消耗金额`,prop: "useMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
      ],
      // 显示搜索栏
      showSearch: true,
      // 当前tab激活项
      tavIndex:0,
      // label集合
      labelList:[
        "下游公司对账单",
        "下游产品对账单",
        "上游公司对账单",
        "上游渠道对账单"
      ],
      // 分页查询方法集合
      pageMethodsList:[
        queryDownCompanyBillByPage,
        queryDownProductBillByPage,
        queryUpCompanyBillByPage,
        queryUpProductBillByPage
      ],
      // 列表信息集合
      columnsList:[],
      // 下游公司对账单表格信息
      DownCompanyBillColumns:[
        { label: `统计日期`,prop: "billTime",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `下游公司名称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `充值金额`,prop: "inMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `核销金额`,prop: "obviateMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `对冲金额`,prop: "offsetMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `退款金额`,prop: "refundMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `账户余额`,prop: "surplusMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `消耗金额`,prop: "useMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
      ],
      // 下游产品对账单表格信息
      DownProductBillColumns:[
        { label: `统计范围`,prop: "billTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `下游公司名称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `产品名称`,prop: "productName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `下游结算模式`,prop: "child_downRewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `统计日期`,prop: "child_billTime",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `充值`,prop: "child_inMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `退款`,prop: "child_refundMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `单量`,prop: "child_orderNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `消耗`,prop: "child_money",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `调整单量`,prop: "child_amendNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `调整消耗`,prop: "child_amendMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `最终单量`,prop: "child_finalNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `最终消耗`,prop: "child_finalMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `账户余额`,prop: "child_surplusMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `操作`,prop: "operation",visible: true,pcWidth: 100,mobileWidth: 80,fixed: "right",},
      ],
      // 上游公司对账单表格信息
      UpCompanyBillColumns:[
        { label: `统计日期`,prop: "billTime",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `上游公司名称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `充值金额`,prop: "inMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `核销金额`,prop: "obviateMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `对冲金额`,prop: "offsetMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `退款金额`,prop: "refundMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `账户余额`,prop: "surplusMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `消耗金额`,prop: "useMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
      ],
      // 上游渠道对账单表格信息
      UpProductBillPageColumns:[
        { label: `统计范围`,prop: "billTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `上游公司名称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `产品名称`,prop: "productName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `上游结算模式`,prop: "child_upRewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `统计日期`,prop: "child_billTime",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `充值`,prop: "child_inMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `退款`,prop: "child_refundMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `单量`,prop: "child_orderNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `消耗`,prop: "child_money",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `调整单量`,prop: "child_amendNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `调整消耗`,prop: "child_amendMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `最终单量`,prop: "child_finalNum",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `最终消耗`,prop: "child_finalMoney",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `账户余额`,prop: "child_surplusMoney",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `操作`,prop: "operation",visible: true,pcWidth: 100,mobileWidth: 80,fixed: "right",},
      ],
      // 弹框显示状态
      dialogShow: false,
      // 弹框的表单信息
      form: {},
      // 弹框表单校验规则
      rules: {
        changeType:[
          { required: true, message: "修正类型不能为空", trigger: "change" },
        ]
      },
      // 余额调整接口加载状态
      apiLoading:false,
      // 变更类型筛选项
      changeTypeOption: [
         { label: "增加", value: 1 },
         { label: "减少", value: 2 },
      ],
      // 修正数据回显对象
      echoData:{},
      // 数据确认激活项数据索引
      confirmActiveIndex:null,
      // 数据确认参数
      confirmParams: {},
      // 数据确认校验规则
      confirmRules: {},
      // 数据操作类型
      dataOptTypeList:[
        { label: "数据修正", value: 1 },
        { label: "数据确认", value: 2 },
      ]

    };
  },
  mixins: [tableStickyMixins],
  watch: {
    dataList:{
      handler() {
        // 清空popover激活项索引
        this.confirmActiveIndex = null
      },
      deep: true,
    },
  },
  created() {
    this.getManageList();
    this.getCompanyOptionList();
    this.getProductList()
    this.getChannelList()
    this.init();
    // 初始化表信息集合
    this.columnsList=[
        this.DownCompanyBillColumns,
        this.DownProductBillColumns,
        this.UpCompanyBillColumns,
        this.UpProductBillPageColumns
    ]
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index].pcWidth - this.slightWidth
          : this.columns[index].pcWidth + 17;
      };
    },
    // 计算当前el-tabs位置形式
    tabPosition(){
      return this.device === 'mobile'? 'top': 'left'
    },
    // 文本颜色值
    getTextColor(){
      return (color)=>{
         switch (color) {
          case 0:
            return '#141414';
          case 1:
            return '#389e0d';
          case 2:
            return '#f5222d';
          default:
            return '#000';
        }
      }
    }
  },
  methods: {
    init() {
      // 初始时间
      this.$set(this, "dateRange", [
        moment().format("YYYY-MM-DD 00:00:00"),
        moment().format("YYYY-MM-DD 23:59:59"),
      ]);
      this.getList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 过滤隐藏项合并父级列,排除操作项
      if (!this.columns.filter(pre=>pre?.visible)[columnIndex].prop.includes('child_') && !this.columns.filter(pre=>pre?.visible)[columnIndex].prop.includes('operation')) {
          if (row?.childNum) {
            return {
              rowspan: row?.childNum,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
      } 
    },
    // 切换tab回调
    tabIndexChange(){
      // 组件被激活重新设置微调参数
      this.changeSlightWidth()
      // 设置表信息
      this.columns = this.columnsList[this.tavIndex]
      // console.log('索引',this.tavIndex);
      // 重置初始查询条件并重新查询
      this.resetQuery()
      // 重置修正数据回显对象
      this.$set(this,'echoData',{})
      // 参数信息
      this.$set(this,'confirmParams',{})
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.billTimeStart = this.dateRange[0];
        this.queryParams.billTimeEnd = this.dateRange[1];
      } else {
        delete this.queryParams.billTimeStart;
        delete this.queryParams.billTimeEnd;
      }
      // console.log('查询参数',this.queryParams);
      this.pageMethodsList[this.tavIndex](this.queryParams).then((response) => {
        this.dataList = response?.data?.list
        // 如果是下游产品/上游渠道对账单单独处理结果
        if(['1','3'].includes(this.tavIndex)){
          this.dataList = response?.data?.list?.reduce((arr,pre)=>{
            if(pre?.list?.length){
              // 子项数量
              let childNum = pre?.list?.length
              arr.push(...pre.list.map((item,index)=>{
                // 如果为初始项设置子项数量
                if(index === 0){
                    return  {
                      ...pre,
                      ...this.prefixKeys(item,'child_'),
                      childNum
                    }
                }
                return {
                  ...pre,
                  ...this.prefixKeys(item,'child_')
                }
              }
            ))
            }else{
              arr.push(pre)
            }
            return arr
          },[])
          
        }
        console.log(this.dataList);
        
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消加载状态
          this.loading = false;
        }, 2000);
      })
    },
    // 重置属性转化为新对象
    prefixKeys(obj, prefix) {
         return Object.keys(obj).reduce((acc, key) => {
           acc[prefix + key] = obj[key];
           return acc;
         }, {});
    },
    // 获取管理人列表
    getManageList() {
      querySysUserManageList().then((res) => {
        this.manageOptionList = res?.data;
      });
    },
    // 获取公司筛选项列表
    getCompanyOptionList() {
      // 获取上游公司列表
      getUpCompanyList().then((res) => {
        this.upCompanyOptionList = res.data;
      });
      // 获取下游公司列表
      getDwnCompanyList().then((res) => {
        this.downCompanyOptionList = res.data;
      });
    },
    // 获取产品筛选项列表
    getProductList(){
      // 获取下游产品列表
      downQueryAllProductList().then((res) => {
        this.downProductOptionList = res.data;
      });
    },
    // 获取渠道筛选项列表
    getChannelList(){
      // 获取上游渠道列表
      getUpChannelList().then((res) => {
        this.upChannelOptionList = res.data;
      });
      // 上游产品名称(包含采量)
      queryAllProductList().then((res) => {
        this.upAllChannelOptionList = res.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      this.init();
    },
    // 处理对话框
    handelDialog(title,row = {}) {
        this.dialogShow = true;
        // 设置回显数据
        this.$set(this,'echoData',row || {})
        console.log(row);
        if(row?.child_productId){
            this.$set(this,'form',{
              productId: row?.child_productId,
              billTime: row?.child_billTime,
              money: '0.00',
              orderNum:0,
            })
        }
    },
    /*关闭弹窗*/
    handleClose(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      this.dialogShow = false;
    },
     /*提交操作*/
     handleSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params={};
            params = JSON.parse(JSON.stringify(this.form))
            // 调整金额转化为两位小数
            if(params.money != null){
              params.money = params.money.toFixed(2)
            }
            console.log(params);
            // 开启接口加载状态
            this.apiLoading = true;
            let timer 
            timer && clearTimeout(timer)
            let fun = ['1'].includes(this.tavIndex)?updateDownProductBillAmend:updateUpProductBillAmend
            fun(params).then(res=>{
              if(res.code === 200){
                  this.apiLoading = false;
                  this.$message.success("操作成功");
                  this.handleClose();
                  this.getList();
              }
            }).catch(erro=>{
               timer = setTimeout(()=>{
                this.apiLoading = false;
                this.handleClose();
                this.getList();
              },2000)
            })

          }
        })
      },
      // table行变色处理
      tableRowClassName({row, rowIndex}) {
        if(row?.child_isAmend != undefined){
          return row?.child_isAmend ? 'success-row':'warning-row'
        }
        return '';
      },
       // 显示数据确认弹出窗回调
       showConfirmPopo(row) {
         // 设置二要素验证状态
         this.$set(this,'confirmParams',{
           productId: row?.child_productId,
         })
         // 设置索引打开弹窗
         this.confirmActiveIndex = row?.child_productId
       },
       // 点击取消数据确认操作
       clickCancelConfirm(row){
         this.$message.info("取消操作");
         this.confirmActiveIndex = null;
       },
      // 点击提交数据确认操作
      clickSubmitConfirm(row,formName){
        this.$refs[formName][0].validate((valid) => {
          if (valid) {
            let params={};
            params = JSON.parse(JSON.stringify(this.confirmParams))
            if(!params?.dataOpt){
               this.$message.warning("请先选择操作类型！");
            }else{
              switch(params?.dataOpt){
                case 1:
                  // 数据修正
                  this.handelDialog('数据修正', row)
                  this.confirmActiveIndex = null;
                  return;
                case 2:
                  // 数据确认
                  // 设置数据确认日期
                  params.billTime = row?.child_billTime
                  delete params.dataOpt
                  console.log(params);
                  let fun = ['1'].includes(this.tavIndex)?updateDownProductBillConfirm:updateUpProductBillConfirm
                  fun(params).then((res) => {
                     if(res.code === 200){
                       this.$message.success("操作成功");
                       // 刷新数据
                       this.getList();
                       this.confirmActiveIndex = null;
                     }
                  });
                  return;
              }
            }
          }
        })
      },
  },
};
</script>

<style scoped lang='scss'>
.search-box {
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.content {
  // min-height: 100%;
  padding: 20px;
  background: #fff;
}
.el-table {
    // 滚动条加粗
    --scrollbar-height: 8px;
}
::v-deep .el-tabs__content{
  height: calc(100vh - 166px);
  overflow-y: auto;
}
::v-deep .el-table .success-row {
    background: #f0f9eb;
}
::v-deep .el-table .warning-row {
    background: oldlace;
}
</style>